<!--
   Copyright 2024 The Google Research Authors.
  
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at
  
       http://www.apache.org/licenses/LICENSE-2.0
  
   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
-->

<!DOCTYPE html>
<meta charset="utf-8">
<title>Anthea: A translation quality evaluation tool</title>
<html>
<head>
  <link rel="stylesheet" href="anthea-eval.css"/>
  <link rel="stylesheet" href="anthea-manager.css"/>
  <link rel="stylesheet" href="marot.css"/>
  <script src="anthea-eval.js"></script>
  <script src="anthea-manager.js"></script>
  <script src="marot-histogram.js"></script>
  <script src="marot.js"></script>
  <script src="marot-sigtests.js"></script>
  <script src="marot-utils.js"></script>
  <script>
    let antheaManager = null;
    document.addEventListener('DOMContentLoaded', () => {
      antheaManager = new AntheaManager();
      const testScript = (new URLSearchParams(window.location.search)).get('test');
      if (testScript) {
        const script = document.createElement('script');
        script.src = testScript;
        document.head.append(script);
      }
    });
  </script>
</head>

<body>
  <div id="anthea-menu" class="anthea-menu">
    <ul>
      <li class="anthea-title anthea-dropdown">
        <div class="anthea-dropdown-button" id="anthea-menu-select-button"
             title="Create, open and save evaluation projects, view evaluation files">
          Anthea
        </div>
        <div class="anthea-dropdown-content anthea-menu-select-choices"
             id="anthea-menu-select-choices">
          <div class="anthea-dropdown-item" id="anthea-new"
               title="Start evaluating a new project: pick a template and a project TSV file">
            <table class="anthea-menu-table">
              <tr>
                <td><b>New</b> evaluation project with template:</td>
                <td>
                  <select class="anthea-select" id="anthea-new-project-template">
                    <option value="MQM">MQM</option>
                    <option value="MQM-CD">MQM-CD</option>
                    <option value="MQM-Monolingual">MQM-Monolingual</option>
                    <option value="MQM-Target-First">MQM-Target-First</option>
                    <option value="MQM-WebPage">MQM-WebPage</option>
                  </select>
                </td>
              </tr>
              <tr title="Project TSV file: lines with four fields: source-sentence-group \t target-sentence-group \t doc-name \t system-name">
                <td>Project TSV file:</td>
                <td><input class="anthea-select" id="anthea-new-project-file"
                        accept=".tsv" type="file"></td>
              </tr>
            </table>
          </div>

          <div class="anthea-dropdown-item" id="anthea-open"
               title="Continue evaluating an already active project">
            <table class="anthea-menu-table">
              <tr>
                <td><b>Open</b> active evaluation project:</td>
                <td>
                  <select class="anthea-select"
                       id="anthea-project-template-list"></select>
                </td>
              </tr>
            </table>
          </div>

          <div class="anthea-dropdown-item" id="anthea-download"
               title="Download evaluation JSON file for the currently active evaluation project, optionaly closing and deleting the project after downloading">
            <table class="anthea-menu-table">
              <tr>
                <td><b>Download</b> evaluation JSON file for current project:</td>
                <td>
                  <button id="anthea-download-button"
                     class="anthea-download-button anthea-select">N/A</button>
                </td>
              </tr>
              <tr>
                <td></td>
                <td>
                  <select class="anthea-select-keep" id="anthea-keep-active">
                    <option class="anthea-select-keep"
                            value="keep">Keep evaluation active afterwards</option>
                    <option class="anthea-select-close"
                            value="close">Delete evaluation afterwards!</option>
                  </select>
                </td>
              </tr>
            </table>
          </div>

          <div class="anthea-dropdown-item" id="anthea-view"
               title="View one or more evaluation JSON files, including their aggregate scores">
            <table class="anthea-menu-table">
              <tr>
                <td><b>View</b> evaluation JSON file(s):</td>
                <td><input class="anthea-select" id="anthea-view-files"
                        accept=".json" type="file" multiple></td>
              </tr>
            </table>
          </div>

        </div>
      </li>

      <li class="anthea-dropdown" id="anthea-menu-help-button"
            title="View Anthea user guide and technical details">
        <div
            class="anthea-dropdown-button"><span id="anthea-help-header">Help</span></div>
        <div class="anthea-dropdown-content" id="anthea-menu-help">
          <div id="anthea-help" class="anthea-help">
            <iframe class="anthea-help-iframe" src="anthea-help.html">
            </iframe>
          </div>
        </div>
      </li>

      <li class="anthea-dropdown" id="anthea-menu-log-button"
            title="View log of messages">
        <div
             class="anthea-dropdown-button"><span id="anthea-log-header">Log</span></div>
        <div class="anthea-dropdown-content" id="anthea-menu-log">
          <div id="anthea-log" class="anthea-log">
            <div id="anthea-log-items" class="anthea-log-items">
            </div>
          </div>
        </div>
      </li>

      <li id="anthea-evaluating-template" class="anthea-menu-text">
        <span class="anthea-evaluating"><b>Template:</b></span>
        <span class="anthea-template-name" id="anthea-template-name"></span>
      </li>
      <li id="anthea-evaluating-project" class="anthea-menu-text">
        <span class="anthea-evaluating"><b>Evaluating project:</b></span>
        <span class="anthea-project-name" id="anthea-project-name"></span>
      </li>
      <li id="anthea-viewing" class="anthea-viewing">
        <span class="anthea-menu-text">
          <b>Viewing <span id="anthea-viewing-count"></span>
            evaluation file(s):</b>
        </span>
        <span class="anthea-viewing-tab" id="anthea-viewing-marot-tab">
          <button class="anthea-viewing-tab-button" id="anthea-viewing-marot">
            Marot
          </button>
          <span class="anthea-viewing-tab-ext"></span>
        </span>
        <span class="anthea-viewing-tab" id="anthea-viewing-eval-tab">
          <button class="anthea-viewing-tab-button" id="anthea-viewing-eval">
            Evaluation Review
          </button>
          <select class="anthea-select anthea-viewing-tab-ext"
                  id="anthea-viewing-list">
          </select>
        </span>
      </li>
    </ul>
  </div>
  <div id="anthea-bell-quote">
    <p>
      If it sounds clumsy, readers will pounce on it of course.
    </p>
    <p>
      —<a target="_blank" title="Anthea Bell's Wikipedia page (new tab)"
          class="anthea-link"
          href="https://en.wikipedia.org/wiki/Anthea_Bell">Anthea Bell</a>
    </p>
  </div>
  <div id="anthea-eval-div" class="anthea-eval-div">
  </div>
  <div id="anthea-marot">
  </div>
</body>
</html>
